<template>
	<view>
		<view class="box" v-for="item in list" :key="item.id">
			<image class="address" src="../../static/address.png" mode=""></image>
			<view class="site-box">
				<view class="title">
					<view>{{item.name}}</view>
					<view>{{item.phone}}</view>
				</view>
				<view class="site">{{item.site}}</view>
			</view>

			<view class="operate">
				<view class="text-1">
					<view class="">
						<image :src="item.default ? '../../static/checked.png' : '../../static/unchecked.png'" mode="">
						</image>
					</view>
					<text :style="{'color':item.default == true ? '#1D2DA7' : '#999'}">默认地址</text>
				</view>

				<view class="text-2">
					<view class="">
						<image src="../../static/del2.png" mode=""></image>
					</view>
					<text class="text">删除</text>

					<view style="display: inline-block;width: 30rpx;"></view>

					<view class="">
						<image style="width: 90%;height: 90%;" src="../../static/bianji.png" mode=""></image>
					</view>
					<text class="text">编辑</text>
				</view>
			</view>
		</view>

		<view class="btn" @click="addAddress">
			<u-button text="增加新地址" color="linear-gradient(to bottom, rgb(29, 45, 167), rgb(95, 114, 253))"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '鱼头',
					phone: '15936874563',
					site: '河南省 郑州市 金水区',
					detailedSite: '河南省郑州市金水区东风路街道文博西路白庙社区白庙小区一号楼',
					default: true,
					id: 1
				}, {
					name: '鱼头',
					phone: '15936874563',
					site: '河南省 郑州市 金水区',
					detailedSite: '河南省郑州市金水区东风路街道文博西路白庙社区白庙小区一号楼',
					default: false,
					id: 1
				}, {
					name: '鱼头',
					phone: '15936874563',
					site: '河南省 郑州市 金水区',
					detailedSite: '河南省郑州市金水区东风路街道文博西路白庙社区白庙小区一号楼',
					default: false,
					id: 1
				}]
			}
		},

		methods: {
			addAddress() {
				uni.navigateTo({
					url:'../add-address/add-address'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.top-bar {
		// height: 120rpx;
		height: calc(var(--status-bar-height) + 44px);
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		background-color: #FFF;
		top: 0%;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;

		.bare-cell {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bar-left {
			flex: 2;
			height: 100%;
		}

		.bar-center {
			flex: 5;
			height: 100%;
		}

		.bar-right {
			flex: 2;
			height: 100%;
		}

		.bug {
			background-color: #f1f1f1;
			height: 30rpx;
			position: absolute;
			top: calc(var(--status-bar-height) + 40px);
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
		}

		.u-badge--error[data-v-2b1712d8] {
			background-color: #3b90fd;
		}
	}

	.box {
		padding: 20rpx;
		width: 90%;
		margin: auto;
		background-color: #FFF;
		border-radius: 10rpx;
		margin-top: 30rpx;

		.address {
			width: 32rpx;
			height: 32rpx;
			position: relative;
			top: -20rpx;
		}

		.site-box {
			display: inline-block;
			position: relative;
			left: 20rpx;

			.title {
				display: flex;
				// align-items: center;
				// justify-content: space-between;

				view {
					&:nth-child(1) {
						font-size: 28rpx;
					}

					&:nth-child(2) {
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
			}

			.site {
				margin-top: 10rpx;
				font-size: 28rpx;
				width: 517rpx;
				height: 75rpx;
			}
		}

		.operate {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 24rpx;

			.text-1 {
				view {
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
						position: relative;
						top: -5rpx;
					}
				}
			}

			.text-2 {
				view {
					width: 30rpx;
					height: 30rpx;
					display: inline-block;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
						position: relative;
						top: -5rpx;
					}
				}

				.text {
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}

	.btn {
		width: 85%;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		margin: auto;
	}
</style>
